<template>
	<view class="wrap" :style="{ minHeight: tools.clientTopHight() }">
		<!-- banner -->
		<view class="banner">
			<image class="img" mode="aspectFill" :src="props.info.cover ?? ''"></image>
			<view class="matchLogo">
				<image mode="aspectFill" :src="getImg(props.info,1)"></image>
				<view class="matchLogo_text" :style="getImg(props.info,2)">
					{{ getImg(props.info,3) }}
				</view>
			</view>
		</view>
		<!-- 基本信息 -->
		<view class="basic flex-direction-column">
			<div class="title one-line">{{ props.info.name }}</div>
			<!-- <view class="desc flex-space-between">
				<view class="d-left flex">
					<text>{{ props.info.price==0 ? '免费' : '￥'+props.info.price+'起'}}</text>
				</view>
				<view class="d-right flex">
					<view class="item flex">
						<image src="/static/icon/17.png"></image> 
						<text>{{ props.info.browses }}</text>
					</view>
				</view>
			</view> -->
		</view>
		<!-- 流程图 -->
		<view class="process flex-space-around">
			<view class="process_item flex-direction-column">
				<!-- (9报名中，7进行中，6报名结束，5已结束)-->
				<image mode="aspectFill"
					:src="props.info.status==9||props.info.status==7||props.info.status==6||props.info.status==5 ? '/static/image/Mstatr_active.png' : '/static/image/Mstatr.png'">
				</image>
				<view class="process_item_text">
					报名开始
				</view>
				<view class="process_item_time">
					{{props.info.sign_start}}
				</view>
			</view>
			<image class="Gimage" mode="aspectFill"
				:src="props.info.status==9||props.info.status==7||props.info.status==6||props.info.status==5 ? '/static/image/guodu.png' : '/static/image/guoduEnd.png'">
			</image>
			<view class="process_item flex-direction-column">
				<image mode="aspectFill"
					:src="props.info.status==7||props.info.status==6||props.info.status==5 ? '/static/image/Mstatr_active.png' : '/static/image/Mstatr.png'">
				</image>
				<view class="process_item_text">
					报名截止
				</view>
				<view class="process_item_time">
					{{props.info.sign_end}}
				</view>
			</view>
			<image class="Gimage" mode="aspectFill"
				:src="props.info.status==7||props.info.status==6||props.info.status==5 ? '/static/image/guodu.png' : '/static/image/guoduEnd.png'">
			</image>
			<view class="process_item flex-direction-column">
				<image mode="aspectFill"
					:src="props.info.status==7||props.info.status==6||props.info.status==5 ? '/static/image/Mstatr_active.png' : '/static/image/Mstatr.png'">
				</image>
				<view class="process_item_text">
					比赛开始
				</view>
				<view class="process_item_time">
					{{props.info.start_time}}
				</view>
			</view>
		</view>
		<!-- 详细信息 -->
		<view class="mess flex-direction-column">
			<view class="m-item flex">
				<view class="label">报名时间</view>
				<view class="time">
					{{props.info.sign_start + ' ~ ' + props.info.sign_end }}
				</view>
			</view>
			<view class="m-item flex">
				<view class="label">{{'比赛' }}时间</view>
				<view class="time"> {{ props.info.start_time+' ~ '+ props.info.end_time}} </view>
			</view>
			<view class="m-item flex" @click="tools.openLocation(props.info.loaction)">
				<view class="label">{{'比赛'}}地址</view>
				<view class="time one-line"> {{ props.info.province }}{{ props.info.city }}{{ props.info.address }}
				</view>
				<image style="width: 30rpx; height: 36rpx" src="/static/icon/20.png"></image>
			</view>
			<!-- <view class="m-item flex" @click="tools.makePhoneCall(props.info.phone)">
        <view class="label">联系客服</view>
        <view class="time one-line">{{ props.info.phone }}（{{ props.info.contacts }}）</view>
        <image style="width: 30rpx; height: 30rpx" src="/static/icon/26.png"></image>
      </view> -->
		</view>

		<!-- tabs页切换 -->
		<view class="navmenu">
			<view class="content flex-space-around">
				<view class="item" v-for="(item, index) in tabsList.list" :key="index"
					:class="{ active : index == tabsList.navMenuIndex }" @click="navMenuClick(index)">
					{{ item }}
				</view>
			</view>
		</view>

		<!-- 详情介绍 -->
		<view class="m-wrap flex-direction-column" v-if="tabsList.navMenuIndex==0">
			<!-- <view class="t2 flex">{{ props.type == 0 ? '赛事详情' : '活动详情' }}</view> -->
			<view class="parse" :style=" 'margin-bottom:150rpx'">
				<u-parse :html="props.info.detail"></u-parse>
			</view>

			<!-- 立即报名（活动） -->
			<!-- <view class="active-btn" v-if="props.type == 1">
				<view class="btn" :style="getListStyle()" @click="entryClick">{{ getActivityText() }}</view>
			</view> -->
		</view>
		<view class="m-wrap flex-direction-column" v-if="tabsList.navMenuIndex==1">
			<view class="parse" :style="'margin-bottom:150rpx'">
				<u-parse :html="props.info.statement"></u-parse>
			</view>
		</view>
		<view class="m-wrap flex-direction-column" v-if="tabsList.navMenuIndex==2">
			<view class="parse" :style="'margin-bottom:150rpx'">
				<u-parse :html="props.info.achievement"></u-parse>
			</view>
		</view>
		<!-- 组别信息（赛事） -->
		<!--  <view v-if="props.type == 0" class="m-wrap flex-direction-column">
      <view class="t2 flex">组别信息</view>
      <view class="list flex-direction-column">
        <view class="item flex-space-between" v-for="item in props.info.group" :key="item.id">
          <view class="left flex-direction-column">
            <text class="one-line">{{ item.name }}</text>
            <text>{{ item.brief }}</text>
            <text>{{ tools.isFree(item.price) }}</text>
          </view>
          <view class="right">
            <text :style="statusHooks.getGroudStyle(props.info.state, props.info.status, item)" @click="entryClick(item)">{{ getGroudText(item) }}</text>
          </view>
        </view>
      </view>
    </view> -->
	</view>

	<view v-if="props.info.is_enroll==0&&!isClause" class="bottom flex-space-between">
		<view class="price" v-if="isGroup">{{ tools.isFree2(tabsList.chooseData.price  ? tabsList.chooseData.price : '未选择') }} </view>
		<view class="bottom_fenxiang" v-else @click="isShare = !isShare">
			<image class="fenxiang" src="/static/icon/18.png"></image> <text>分享</text>
		</view>
		<view class="btn2" v-if="props.info.status!=9||props.info.state==3">
			{{ getImg(props.info,4) }}
		</view>
		<view v-if="props.info.status==9&&props.info.state!=3">
			<view class="btn" v-if="!isGroup" @click="isGroup=true,isShare=false">立即报名</view>
			<view class="btn" v-if="isGroup&&props.info.status==9" @click="entryClick">立即报名</view>
		</view>
	</view>
	<view v-if="props.info.is_enroll!=0" class="bottom flex-space-between">
		<view class="bottom_fenxiang" @click="isShare = !isShare">
			<image class="fenxiang" src="/static/icon/18.png"></image> <text>分享</text>
		</view>
		<view class="btn2">已报名</view>
	</view>

	<!-- //组别选择 -->
	<view v-if="!isClause">
		<groupPopup :isShow="isGroup" @close="isGroup = false" @groupChoose="groupChoose" :listData="tabsList.listData">
		</groupPopup>
	</view>
	<!-- 分享 -->
	<sharePopup :isShow="isShare" @close="isShare = false" @poster="posterShare"></sharePopup>
	<!-- 海报 -->
	<posterPopup :isShow="isPoster" :share="props.info.share" @close="isPoster = false"></posterPopup>
	<!-- 协议 -->
	<clausePopup :html="props.info.statement" :isBtn="true" :isShow="isClause" @close="isClause = false" @agree="agree">
	</clausePopup>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue'
	import { getcheckOrder } from '@/service/api/order'
	import tools from '@/utils/tools'
	import status from '@/hooks/status'
	import sharePopup from '@/components/popup/share.vue'
	import clausePopup from '@/components/popup/clause.vue'
	import posterPopup from '@/components/popup/poster.vue'
	import groupPopup from '@/components/popup/group.vue'
	const statusHooks = status()

	const props = defineProps({
		// 0 => 赛事 1 => 活动
		type: {
			type: Number,
			default() {
				return 0
			}
		},
		info: {
			type: Object,
			default() {
				return {}
			}
		}
	})

	// 弹窗
	let isShare = ref(false)
	let isPoster = ref(false)
	let isClause = ref(false)
	let isGroup = ref(false)
	let tabsList = reactive({
		list: props.info.tabsList,
		navMenuIndex: 0,
		listData: props.info.group,
		chooseData: {}
	})
	let url = ref(null)

	// 获取组别文字
	const getGroudText = (item) => {
		let str = statusHooks.getListText({ state: props.info.state, status: props.info.status })
		if (str == '去报名') return statusHooks.getGroudText(item)
		return str
	}

	// 点击 nav
	const navMenuClick = (index : any) => {
		console.log("-----index---");
		console.log(index);
		tabsList.navMenuIndex = index;
		console.log(tabsList.navMenuIndex);
	}
	// 获取活动文字
	const getActivityText = () => {
		return statusHooks.getListText({ state: props.info.state, status: props.info.status })
	}

	// 获取样式
	const getListStyle = () => {
		return statusHooks.getListStyle({ state: props.info.state, status: props.info.status })
	}

	// 同意协议
	const agree = () => {
		isClause.value = false
		tools.navTo(url.value)
	}

	// 去报名
	const entryClick = () => {
		// tools.navTo(`/pagesA/entry/single?id=${props.info.group.id}`)
		if (Object.keys(tabsList.chooseData).length != 0) {
			if (!tools.getStorage('token')) return tools.navTo('/pagesA/mine/login')
			// 检查是否有待支付订单
			getcheckOrderApi(props.info.id).catch(() => {
				if (isEntry(tabsList.chooseData).search('/pagesA') != -1) return (url.value = isEntry(tabsList.chooseData)), agree()
				// if (isEntry(tabsList.chooseData).search('/pagesA') != -1) return (isClause.value = true), (url.value = isEntry(tabsList.chooseData))
				if (props.type == 0) return tools.showToast(getGroudText(tabsList.chooseData))
				if (props.type == 1) return tools.showToast(getActivityText())
			})
		} else {
			tools.showToast('请先选择组别')
		}
	}

	const isEntry = (item : any) => {
		if (props.type == 0 && item.type == 2 && getGroudText(item) == '去报名') return `/pagesA/entry/team?id=${item.id}`
		if (props.type == 0 && item.type == 1 && getGroudText(item) == '去报名') return `/pagesA/entry/single?id=${item.id}`
		// if (props.type == 1 && getActivityText() == '去报名') return `/pagesA/entry/single?id=${props.info.group.id}`
		return ''
	}
	// 点击海报
	const posterShare = () => {
		isShare.value = false
		isPoster.value = true
	}
	// 点击海报
	const groupChoose = (e : any) => {
		console.log(e);
		tabsList.listData = e.listData
		//选中的数据
		// e.chooseData
		tabsList.chooseData = e.chooseData
	}
	// 检查是否有待支付订单
	const getcheckOrderApi = async (id) => {
		const res = await getcheckOrder({ id })
		return new Promise((reolve, reject) => {
			// type 1 2 赛事 3 活动
			if (res.code == 1) {
				tools
					.showModel('提示', '您有待支付订单')
					.then(() => tools.navTo(`/pagesA/order/index?id=${res.msg}`))
					.catch(() => {
						reject()
					})
			} else {
				reject()
			}
		})
	}
	const getImg = (item : any, index : number) => {
		if (index == 1) {
			if (item.state == 3) return '/static/image/end.png'
			if (item.status == 9) return '/static/image/run.png'
			if (item.status == 7) return '/static/image/statr.png'
			return '/static/image/end.png'
		}
		if (index == 2) {
			if (item.state == 3) return 'background: rgba(203,206,212,1);'
			if (item.status == 9) return 'background: rgba(108,175,120,1)'
			if (item.status == 7) return 'background: rgba(253,118,131,1)'
			return 'background: rgba(203,206,212,1);'
		}
		if (index == 3) {
			if (item.state == 3) return '已暂停'
			if (item.status == 9) {
				if (item.day == 0) return '报名今天截止'
				return '距报名截止还有' + item.day + '天'
			}
			if (item.status == 8) return '报名未开始'
			if (item.status == 7) return '进行中'
			if (item.status == 6) return '报名结束'
			if (item.status == 5) return '已结束'
		}
		if (index == 4) {
			if (item.state == 3) return '已暂停'
			if (item.status == 8) return '报名未开始'
			if (item.status == 7) return '进行中'
			if (item.status == 6) return '报名结束'
			if (item.status == 5) return '已结束'
		}
	}
</script>

<style lang="scss" scoped>
	.banner {
		width: 100%;
		height: 421rpx;
		// height: 460rpx;
		background-color: #f9f9f9;
		position: relative;

		.matchLogo {
			position: absolute;
			right: 0rpx;
			top: 360rpx;
			display: flex;

			image {
				width: 24rpx;
				height: 48rpx;
			}

			.matchLogo_text {
				height: 48rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: left;
				padding: 5rpx 15rpx;
				background: rgba(253, 118, 131, 1);
			}
		}
	}

	.basic {
		background-color: #fff;
		padding: 24rpx 24rpx 32rpx 24rpx;

		.title {
			height: 44rpx;
			font-size: 32rpx;
			font-weight: bold;
			line-height: 44rpx;
		}

		.desc {
			margin-top: 20rpx;

			.d-left {
				color: #F24C55;
				font-weight: bold;

				image {
					width: 28rpx;
					height: 28rpx;
				}

				text {
					font-size: 40rpx;
					margin: 0rpx 5rpx;
				}
			}

			.d-right {
				.item {
					position: relative;

					// &:nth-child(1) {
					//   &::after {
					//     content: '';
					//     width: 2rpx;
					//     height: 12rpx;
					//     margin: 0 30rpx;
					//     background-color: #ddd;
					//   }
					// }
					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 5rpx;
					}

					text {
						font-size: 28rpx;
						color: #777777;
					}
				}
			}
		}
	}

	.process {
		height: 220rpx;
		background: rgba(255, 255, 255);
		margin-top: 20rpx;
		padding: 0 52rpx;

		.Gimage {
			width: 40rpx;
			height: 17rpx;
		}

		.process_item {
			align-items: center;

			image {
				width: 80rpx;
				height: 80rpx;
			}

			.process_item_text {
				font-weight: 400;
				color: #000000;
				font-size: 28rpx;
				font-family: PingFang SC;
				white-space: normal;
			}

			.process_item_time {
				color: #999999;
				font-size: 26rpx;
				font-family: PingFang SC;
			}
		}
	}

	.mess {
		margin-top: 20rpx;
		padding: 10rpx 24rpx;
		background-color: #fff;

		.m-item {
			font-size: 28rpx;
			margin-top: 20rpx;
			padding-bottom: 30rpx;
			border-bottom: 1px solid #eee;

			&:last-child {
				border: none;
				padding-bottom: 20rpx;
			}

			.label {
				width: 160rpx;
			}

			.time {
				flex: 1;
				margin-right: 20rpx;
			}

			image {
				width: 26rpx;
				height: 32rpx;
			}
		}
	}

	.active {
		color: #354678;
		font-weight: bold;
		border-bottom: 3px solid #354678;
	}

	.navmenu {
		height: 100rpx;
		line-height: 99rpx;
		font-size: 30rpx;
		color: #777;
		border-bottom: 1px solid #eee;
		background: white;
		background-color: white;
		opacity: 1;
		padding: 0 40rpx;
		// position: sticky;
		z-index: 99999 !important;
		// top: 155rpx;

		.content {
			margin: 0 -28rpx;

			.item {
				height: 99rpx;
			}
		}
	}

	.m-wrap {
		// margin-top: 20rpx;
		background-color: #fff;
		padding: 30rpx 24rpx 26rpx 24rpx;
		min-height: 180vw;

		.list {
			.item {
				margin-top: 26rpx;
				align-items: flex-end;
				padding-bottom: 18rpx;
				border-bottom: 1px solid #eee;

				&:last-child {
					border: none;
					padding-bottom: 0rpx;
				}

				.left {
					flex: 1;
					margin-right: 40rpx;

					text {
						&:nth-child(1) {
							height: 44rpx;
							font-size: 32rpx;
							line-height: 44rpx;
						}

						&:nth-child(2) {
							height: 36rpx;
							font-size: 26rpx;
							line-height: 36rpx;
							color: #999999;
							margin-top: 8rpx;
						}

						&:nth-child(3) {
							height: 40rpx;
							font-size: 28rpx;
							line-height: 40rpx;
							color: #e6425e;
							margin-top: 8rpx;
						}
					}
				}

				.right {
					// color: #fff;
					width: 160rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					// background: rgba(230, 66, 94);
					border-radius: 6rpx;
					font-size: 32rpx;

					text {
						border-radius: 6rpx;
					}
				}
			}
		}
	}

	.parse {
		margin-top: 38rpx;
	}

	.active-btn {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
	}

	.btn {
		color: #fff;
		width: 460rpx;
		height: 84rpx;
		text-align: center;
		line-height: 84rpx;
		font-size: 32rpx;
		background: rgba(230, 66, 94);
		border-radius: 6rpx;
		// margin: 30rpx auto 60rpx auto;
	}

	.btn2 {
		color: #fff;
		width: 460rpx;
		height: 84rpx;
		text-align: center;
		line-height: 84rpx;
		font-size: 32rpx;
		background: rgba(228, 228, 228);
		border-radius: 6rpx;
		// margin: 30rpx auto 60rpx auto;
	}

	.aside {
		top: 60%;
		right: 6rpx;
		width: 132rpx;
		position: fixed;
		margin-top: -100rpx;

		image {
			width: 100%;
			height: 132rpx;
			margin-bottom: 18rpx;
		}
	}

	.bottom {
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		z-index: 99999 !important;
		// height: 160rpx;
		// padding-bottom: 60rpx;
		position: fixed;
		// padding: 0 26rpx;
		background-color: #fff;
		box-shadow: 0rpx -8rpx 12rpx rgba(0, 0, 0, 0.08);
		white-space: nowrap;
		opacity: 1;

		.bottom_fenxiang {
			display: flex;
			margin-left: 68rpx;
			align-items: center;
		}

		.price {
			margin-left: 30rpx;
			display: flex;
			height: 56rpx;
			font-size: 40rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #F24C55;
			opacity: 1;

			&::before {
				content: '总计：';
				color: #000000;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 50rpx;
				color: #000000;
				opacity: 1;
			}
		}

		.btn {
			color: #fff;
			height: 100rpx;
			width: 440rpx;
			line-height: 100rpx;
			text-align: center;
			background: linear-gradient(270deg, #354678 0%, #5062A7 100%);
		}
	}

	.fenxiang {
		width: 40rpx;
		height: 40rpx;
		margin-right: 5rpx;
	}
</style>